<template>
	<view class="fu-m-x-30">
		<view class="box">
			<fu-ribbon :mode="mode" :bgColor="bgColor">{{ text }}</fu-ribbon>
		</view>
		
		<fu-button @click="onClick('left')">左侧</fu-button>
		<fu-button margin="15px 0 0" @click="onClick('right')">右侧</fu-button>
		<fu-button margin="15px 0 0" @click="onClick('right', '已通过')">自定义内容</fu-button>
		<fu-button margin="15px 0 0" @click="onClick('right', '已通过', '#2979ff')">自定义背景</fu-button>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	
	// data数据
	let mode = ref('right');
	let text = ref('审核中');
	let bgColor = ref('#79A70A')
	
	// methods方法
	const onClick = (e, t, color) => {
		mode.value = e;
		text.value = t || '审核中';
		bgColor.value = color || '#79A70A';
	}
</script>

<style lang="scss">
	.box {
		width: 200px; 
		height: 300px;
		position: relative;
		border: 1px solid #BBB;
		background: #EEE;
		margin: 30rpx auto;
	}
</style>